<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <link href="/stylesheets/style.css" rel="stylesheet">
    <link href="/stylesheets/mobiscroll.min.css" rel="stylesheet">

    <script src="/javascripts/lib/jquery.cookie.min.js"></script>
    <script src="http://webapi.openspeech.cn/socket.io/socket.io.js"></script>
    <script src="/javascripts/lib/mobiscroll.min.js"></script>
    <script src="/javascripts/common.js"></script>
    <script src="/javascripts/rentController.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=61su9bm0PHw4gkMIZt8cZWpG"></script>

    <title>尚悦丨包车</title>
</head>
<body>

<div style="background-color: #FF7F00;position: absolute;top: 0;height: 40px;width: 100%">
    <p style="color: #FFFAFA;text-align: center;font-size: 14px;border: 8px solid #FF7F00;">
        <b>包&nbsp;&nbsp;&nbsp;车</b></p>
</div>

<div class="content">
    <div class="sub-menu">
        <a href="/rent" class="sub-menu-item menu-border col-xs-4 col-md-4">公务包车</a>
        <a href="/rent/travel" class="sub-menu-item menu-border col-xs-4 col-md-4">旅游包车</a>
        <a href="/rent/airport" class="shadow sub-menu-item col-xs-4 col-md-4">接送机</a>
    </div>
    <span style="display: none" id="server">{{ server_url }}</span>
    <div class="col-xs-12 col-md-12 h-line-grey" style="background-color: #eee;height: 10px"></div>

    <div class="col-xs-12 col-md-12 margin-top sub-title margin-bottom">接送机</div>
    <div class="col-xs-12 col-md-12 h-line-grey" style="border-color:#aaa"></div>

    <div class="sub-menu">
        <div class="sub-menu-item menu-border menu-margin col-xs-6 col-md-6 air-shadow" id="goAirport">接机</div>
        <div class="sub-menu-item menu-margin col-xs-6 col-md-6" id="offAirport">送机</div>

        <script>
            $("#goAirport").click(function(){
                $(this).addClass('air-shadow');
                $("#offAirport").removeClass('air-shadow');
            });

            $("#offAirport").click(function(){
                $(this).addClass('air-shadow');
                $("#goAirport").removeClass('air-shadow');
            });
        </script>
    </div>
    <div class="col-xs-12 col-md-12 h-line-grey" style="border-color:#bbb"></div>

    <form class="form-horizontal col-xs-11  col-sm-11 margin-top">
        <div class="form-group margin-top">
            <label class="col-xs-4 col-sm-4 control-label info-label">出发地</label>
            <div class="col-sm-8 col-xs-8">
                <input type="text" class="form-control geo-location" id="startAddr" onchange="sureFee()" />
            </div>
        </div>

        <div class="form-group margin-top">
            <label class="col-xs-4 col-sm-4 control-label info-label">目的地</label>
            <div class="col-sm-8 col-xs-8">
                <input type="text" class="form-control geo-location" id="endAddr" onchange="sureFee()" />
            </div>
        </div>

        <div class="form-group margin-top">
            <label class="col-xs-4 col-sm-4 control-label info-label">客户称呼</label>
            <div class="col-sm-8 col-xs-8">
                <input type="text" class="form-control" id="customerName" />
            </div>
        </div>

        <div class="form-group margin-top">
            <label class="col-xs-4 col-sm-4 control-label info-label">联系方式</label>
            <div class="col-sm-8 col-xs-8">
                <input type="text" class="form-control" id="customerTel" />
            </div>
        </div>

        <div class="form-group margin-top">
            <label class="col-xs-4 col-sm-4 control-label info-label">上车时间</label>
            <div class="col-sm-8 col-xs-8">
                <input class="form-control form-datetime" id="startTime"  onchange="sureFee()" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10 col-xs-offset-2 col-xs-10">
                <button type="button" id="rentBusiness" data="airport" class="btn btn-xs btn-warning float">&nbsp;&nbsp;确定&nbsp;&nbsp;</button>
            </div>
        </div>

        <div class="form-group" style="position: fixed;top:87%;left:41%">预计费用:<span style="color: red" id="total_fee">0</span>元</div>
    </form>

    <div class="bottom-menu">
        <a href="/">首页&nbsp;</a><span>|</span>
        <a href="/piece">拼车&nbsp;</a><span>|</span>
        <a href="/rent">包车&nbsp;</a><span>|</span>
        <a href="/download/driver">与尚悦网合作&nbsp;</a><span>|</span>
        <a href="/user/center">个人中心&nbsp;</a>
    </div>
</div>

<div id="bdMapContainer" class="map-container">
    <div id='bdMap'></div>
</div>
<div id="bdMapInput" class="input-container">
    <button type="button" class="btn btn-primary btn-xs geo-sure">确定</button>
    <button type="button" class="btn btn-warning btn-xs geo-cancel">取消</button>
    <input type="text" id="geoInput" placeholder="请输入地址或在地图上选择位置" class="form-control geo-input"/>

    <div id="completePanel" class="complete-panel"></div>
</div>
</body>
</html>